<template>
    <div class="ewmdl-banner" v-if="rjxtList.length > 0" v-for="(item, index) in rjxtList" :key="index">
        <template v-if="item.position === 'banner'">
            <img :src="item.image_url" alt="">
        </template>
    </div>
    <div class="ewmdl">
        <div class="ewmdl-content">
            <div class="ewmdl-box1">
                <div class="ewmdl-box1-img">
                    <template v-if="imgArr.length > 0">
                        <img :src="imgArr[0].image_url" alt="">
                    </template>
                </div>
                <div class="ewmdl-box1-article">
                    <div class="box1-article-title">
                        <strong>二维码导览</strong>
                    </div>
                    <div class="box1-article-content">
                        <template v-if="imgArr1.length > 0">
                            <img :src="imgArr1[0].image_url" alt="">
                        </template>
                    </div>
                    <div class="box1-article-footer">
                        <p>二维码导览开发简单成本低，只需在展品处放置一个二维码，观众用手机扫码后，就可以播放该展品的详细介绍，通过语音、视频、图片、文字的形式，向观众详细介绍展品详情，同时也能够记录每个展品的播放次数，了解展品受欢迎程度。
                        </p>
                    </div>
                </div>
            </div>
            <div class="guide-container">
                <div class="guide-header">
                    <h2>手机扫码导览</h2>
                    <p>二维码导览是大势所趋，手机已经成为必需品，在手机上操作更加方便快捷，观众更容易接受。</p>
                </div>
                <div class="guide-steps">
                    <div class="step">
                        <template v-if="imgArr2.length > 0">
                            <img :src="imgArr2[0].image_url" alt="">
                        </template>
                        <p>手机扫描二维码</p>
                    </div>
                    <div class="arrow">➔</div>
                    <div class="step">
                        <template v-if="imgArr2.length > 0">
                            <img :src="imgArr2[1].image_url" alt="">
                        </template>
                        <p>获取文物语音讲解和视频动画</p>
                    </div>
                    <div class="arrow">➔</div>
                    <div class="step">
                        <template v-if="imgArr2.length > 0">
                            <img :src="imgArr2[2].image_url" alt="">
                        </template>
                        <p>点击播放收听讲解</p>
                    </div>
                </div>
            </div>
            <!-- 小程序定制 -->
            <div class="app-container">
                <div class="app-container-box">
                    <div class="app-container-header">
                        <div class="section-img">
                            <template v-if="imgArr.length > 0">
                                <img :src="imgArr3[0].image_url" alt="">
                            </template>
                        </div>
                        <!-- 公告活动中心 -->
                        <div class="section">
                            <div class="section-content">
                                <h2>公告，活动中心</h2>
                                <p>可以发布展览的预告信息和重要通知，展馆各项活动的报名和公布，为客户做沟通传达，通知的作用。</p>
                            </div>
                        </div>
                    </div>
                    <!-- 白色间断线 -->
                    <div class="white-line"></div>
                    <div class="app-container-header">
                        <div class="section-img">
                            <template v-if="imgArr.length > 0">
                                <img :src="imgArr3[1].image_url" alt="">
                            </template>
                        </div>
                        <!-- 公告活动中心 -->
                        <div class="section">
                            <div class="section-content">
                                <h2>展厅详情</h2>
                                <p>可以罗列所有展厅的详细介绍，具体位置，有无志愿者等，为观众在来到展厅之前，就对展览展厅有简单的了解。</p>
                            </div>
                        </div>
                    </div>
                    <!-- 白色间断线 -->
                    <div class="white-line"></div>
                    <div class="app-container-header">
                        <div class="section-img">
                            <template v-if="imgArr.length > 0">
                                <img :src="imgArr3[2].image_url" alt="">
                            </template>
                        </div>
                        <!-- 公告活动中心 -->
                        <div class="section">
                            <div class="section-content">
                                <h2>志愿者</h2>
                                <p>可以帮助客户完成志愿者的招募任务，公布志愿者活动，志愿者风采，信息清晰，方便查看。</p>
                            </div>
                        </div>
                    </div>
                    <!-- 白色间断线 -->
                    <div class="white-line"></div>
                    <div class="app-container-header">
                        <div class="section-img">
                            <template v-if="imgArr.length > 0">
                                <img :src="imgArr3[2].image_url" alt="">
                            </template>
                        </div>
                        <!-- 公告活动中心 -->
                        <div class="section">
                            <div class="section-content">
                                <h2>“我的”个人中心</h2>
                                <p>可以显示观众在本小程序中，带参加的活动，已结束的活动，待支付的商品和售后服务，直观的让观众明白小程序的功能。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getXcxdzList } from '@/api/rjxt'

const rjxtList = ref([])
const imgArr = ref([])
const imgArr1 = ref([])
const imgArr2 = ref([])
const imgArr3 = ref([])

onMounted(() => {
    getXcxdzList().then(res => {
        rjxtList.value = res.data

        imgArr.value = rjxtList.value.filter(item => item.position === 'content')
        imgArr1.value = rjxtList.value.filter(item => item.position === 'content_01')
        imgArr2.value = rjxtList.value.filter(item => item.position === 'content_02')
        imgArr3.value = rjxtList.value.filter(item => item.position === 'content_03')
    })
})

</script>
<style scoped>
@media screen and (min-width: 1920px) {
    .ewmdl {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .ewmdl-banner {
        width: 100%;
        height: auto;
        
        img {
            width: 100%;
            height: auto;
        }
    }

    .app-container-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    .white-line {
        border-top: 2px dashed #ffffff;
        width: 1000px;
        margin: 39px 0;
    }

    .app-container-header {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin-bottom: 100px;
    }

    .app-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: rgb(207, 226, 243);
        width: 1200px;
        max-width: 1200px;
    }

    .section {
        display: flex;
        margin-bottom: -75px;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
        width: 420px;
        height: 190px;
        max-width: 600px;
        margin-left: 120px;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
        align-content: center;
    }

    .section-img {
        margin-left: 140px;
        margin-top: 100px;

        img {
            max-width: 100%;
            height: auto;
        }
    }

    .section-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* 添加阴影 */
    }

    .section-content h2 {
        font-size: 24px;
        color: #333;
        margin-bottom: 10px;
        align-items: center;
        line-height: 1.75;
        margin-top: 30px;
    }

    .section-content p {
        font-size: 18px;
        color: #666;
        line-height: 1.75;
        padding: 0 12px;
        margin: 30px auto;
        padding: 0 50px;
    }

    .guide-container {
        background-color: #e0e0e0;
        padding: 20px;
        text-align: center;
        height: 300px;
        max-width: 1200px;
        margin-top: 83px;
        margin-bottom: 300px;
    }

    .guide-header h2 {
        font-size: 24px;
        margin-bottom: 10px;
        color: #ffffff;
        font-size: xx-large
    }

    .guide-header p {
        font-size: 18px;
        color: #fff;
        text-align: center;
    }

    .guide-steps {
        bottom: -67px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        position: relative;
    }

    .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 10px;
    }

    .step img {
        width: 300px;
        height: auto;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    .step p {
        font-size: 18px;
        color: #aaaaaa;
    }

    .arrow {
        font-size: 24px;
        color: #333;
        margin: 0 10px;
    }

    .ewmdl-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .ewmdl-box1 {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-family: Arial, sans-serif;
        width: 1200px;
        height: 450px;
        margin-left: 300px;
        margin-top: 93px;
    }

    .ewmdl-box1-img img {
        max-width: 100%;
        height: auto;
    }

    .ewmdl-box1-article {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: flex-start;
        justify-content: center;
        margin-left: 150px;
    }


    .box1-article-title strong {
        font-size: 36px;
        color: #cc0000;
        /* 深红色 */
        margin-bottom: 30px;
        display: block;
        font-weight: normal;
    }

    .box1-article-content {
        margin-bottom: 30px;
    }

    .box1-article-footer {
        width: 582px;
        line-height: 1.75;
        font-size: 16px;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1919px) {
    .ewmdl {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 100%;

    }

    .ewmdl-banner {
        img {
            max-width: 100%;
            height: auto;
        }
    }

    .app-container-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    .white-line {
        border-top: 2px dashed #ffffff;
        width: 1000px;
        margin: 39px 0;
    }

    .app-container-header {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin-bottom: 100px;
    }

    .app-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: rgb(207, 226, 243);
        width: 1200px;
        max-width: 1200px;
    }

    .section {
        display: flex;
        margin-bottom: -75px;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
        width: 420px;
        height: 190px;
        max-width: 600px;
        margin-left: 120px;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
        align-content: center;
    }

    .section-img {
        margin-left: 140px;
        margin-top: 100px;

        img {
            max-width: 100%;
            height: auto;
        }
    }

    .section-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* 添加阴影 */
    }

    .section-content h2 {
        font-size: 24px;
        color: #333;
        margin-bottom: 10px;
        align-items: center;
        line-height: 1.75;
        margin-top: 30px;
    }

    .section-content p {
        font-size: 18px;
        color: #666;
        line-height: 1.75;
        padding: 0 12px;
        margin: 30px auto;
        padding: 0 50px;
    }

    .guide-container {
        background-color: #e0e0e0;
        padding: 20px;
        text-align: center;
        height: 300px;
        max-width: 1200px;
        margin-top: 83px;
        margin-bottom: 300px;
    }

    .guide-header h2 {
        font-size: 24px;
        margin-bottom: 10px;
        color: #ffffff;
        font-size: xx-large
    }

    .guide-header p {
        font-size: 18px;
        color: #fff;
        text-align: center;
    }

    .guide-steps {
        bottom: -67px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        position: relative;
    }

    .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 10px;
    }

    .step img {
        width: 300px;
        height: auto;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    .step p {
        font-size: 18px;
        color: #aaaaaa;
    }

    .arrow {
        font-size: 24px;
        color: #333;
        margin: 0 10px;
    }

    .ewmdl-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .ewmdl-box1 {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-family: Arial, sans-serif;
        width: 1200px;
        height: 450px;
        margin-left: 300px;
        margin-top: 93px;
    }

    .ewmdl-box1-img img {
        max-width: 100%;
        height: auto;
    }

    .ewmdl-box1-article {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: flex-start;
        justify-content: center;
        margin-left: 150px;
    }


    .box1-article-title strong {
        font-size: 36px;
        color: #cc0000;
        /* 深红色 */
        margin-bottom: 30px;
        display: block;
        font-weight: normal;
    }

    .box1-article-content {
        margin-bottom: 30px;
    }

    .box1-article-footer {
        width: 582px;
        line-height: 1.75;
        font-size: 16px;
    }
}

/* // 媒体查询 平板电脑 */
@media (min-width: 769px) and (max-width: 1024px) {

    .ewmdl {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .ewmdl-banner {
        img {
            max-width: 100%;
            height: auto;
        }
    }

    .app-container-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    .white-line {
        border-top: 2px dashed #ffffff;
        width: 1000px;
        margin: 39px 0;
    }

    .app-container-header {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin-bottom: 100px;
    }

    .app-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: rgb(207, 226, 243);
        width: 1200px;
        max-width: 1200px;
    }

    .section {
        display: flex;
        margin-bottom: -75px;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
        width: 420px;
        height: 190px;
        max-width: 600px;
        margin-left: 120px;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
        align-content: center;
    }

    .section-img {
        margin-top: 100px;

        img {
            max-width: 100%;
            height: auto;
        }
    }

    .section-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

        background-color: #fff;
        /* 添加阴影 */
    }

    .section-content h2 {
        font-size: 24px;
        color: #333;
        margin-bottom: 10px;
        align-items: center;
        line-height: 1.75;
        margin-top: 30px;
    }

    .section-content p {
        font-size: 18px;
        color: #666;
        line-height: 1.75;
        padding: 0 12px;
        margin: 30px auto;
        padding: 0 50px;
    }

    .guide-container {
        background-color: #e0e0e0;
        padding: 20px;
        text-align: center;
        height: 200px;
        max-width: 1200px;
        margin-top: 83px;
        margin-bottom: 300px;
    }

    .guide-header h2 {
        font-size: 24px;
        margin-bottom: 10px;
        color: #ffffff;
        font-size: xx-large
    }

    .guide-header p {
        font-size: 18px;
        color: #fff;
        text-align: center;
    }

    .guide-steps {
        bottom: -20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        position: relative;
    }

    .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 10px;
    }

    .step img {
        max-width: 300px;
        width: 184px;
        height: auto;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    .step p {
        font-size: 18px;
        color: #aaaaaa;
    }

    .arrow {
        font-size: 24px;
        color: #333;
        margin: 0 10px;
    }

    .ewmdl-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .ewmdl-box1 {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-family: Arial, sans-serif;
        width: 726px;
        height: 421px;
        margin-top: 93px;
    }

    .ewmdl-box1-img img {
        max-width: 100%;
        height: auto;
        max-height: 450px;
    }

    .ewmdl-box1-article {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: flex-start;
        justify-content: center;
        margin-left: 70px;
    }


    .box1-article-title strong {
        font-size: 36px;
        color: #cc0000;
        /* 深红色 */
        margin-bottom: 30px;
        display: block;
        font-weight: normal;
    }

    .box1-article-content {
        margin-bottom: 30px;
    }

    .box1-article-footer {
        width: 345px;
        line-height: 1.75;
        font-size: 16px;
    }
}

/* // 媒体查询 手机 */
@media (max-width: 768px) {

    .ewmdl {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .ewmdl-banner {
        img {
            max-width: 100%;
            height: auto;
        }
    }

    .app-container-box {
        display: flex;
        flex-direction: colrowmn;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    .white-line {
        border-top: 2px dashed #ffffff;
        width: 1000px;
        margin: 39px 0;
    }

    .app-container-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin-bottom: 180px;
        width: 370px;
    }

    .app-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: rgb(207, 226, 243);
        width: 1200px;
        max-width: 1200px;
    }

    .section {
        display: flex;
        margin-bottom: -75px;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
        width: 360px;
        height: 190px;
        max-width: 600px;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
        align-content: center;
    }

    .section-img {
        margin: 50px 0px;

        img {
            max-width: 100%;
            height: auto;
        }
    }

    .section-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

        background-color: #fff;
        /* 添加阴影 */
    }

    .section-content h2 {
        font-size: 24px;
        color: #333;
        margin-bottom: 10px;
        align-items: center;
        line-height: 1.75;
        margin-top: 30px;
    }

    .section-content p {
        font-size: 18px;
        color: #666;
        line-height: 1.75;
        padding: 0 12px;
        margin: 30px auto;
        padding: 0 50px;

    }

    .guide-container {
        background-color: #e0e0e0;
        padding: 20px;
        text-align: center;
        width: 350px;
        height: 200px;
        max-width: 1200px;
        margin-top: 476px;
        margin-bottom: 180px;
    }

    .guide-header h2 {
        font-size: 24px;
        margin-bottom: 10px;
        color: #ffffff;
        font-size: xx-large
    }

    .guide-header p {
        color: #fff;
        text-align: center;
        /* 文字换行 */
        word-wrap: break-word;
        /* 自动换行 */
    }

    .guide-steps {
        bottom: -20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        position: relative;
    }

    .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 10px;
    }

    .step img {
        max-width: 300px;
        width: 80px;
        height: auto;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    .step p {
        font-size: 18px;
        color: #aaaaaa;
    }

    .arrow {
        font-size: 24px;
        color: #333;
        margin: 0 10px;
    }

    .ewmdl-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .ewmdl-box1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-family: Arial, sans-serif;
        /* width: 726px; */
        height: 421px;
        margin-top: 93px;
        /* margin-left: auto;*/
    }

    .ewmdl-box1-img img {
        width: 225px;
        max-width: 225px;
        max-height: 450px;
    }

    .ewmdl-box1-article {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: flex-start;
        justify-content: center;
        margin-left: 10px;
        margin-top: 30px;
    }


    .box1-article-title strong {
        font-size: 36px;
        color: #cc0000;
        /* 深红色 */
        margin-bottom: 30px;
        display: block;
        font-weight: normal;
    }

    .box1-article-content {
        margin-bottom: 30px;
    }

    .box1-article-footer {
        width: 300px;
        line-height: 1.75;
        font-size: 16px;
    }
}
</style>